<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>主页面</title>
    <link th:href="@{/js/el/element.css}" rel="stylesheet"  type="text/css"/>
    <script th:src="@{/js/vue.min.js}" type="text/javascript"></script>
    <script th:src="@{/js/el/element.js}" type="text/javascript"></script>
    <script th:src="@{/js/axios.js}" type="text/javascript"></script>
</head>
<body>
    <div id="app">
        <div th:include="~{common/head-myblogs::head}"></div>

        <div>
            <img src="/css/img/logo.gif">
        </div>

        <div>
            <el-input
                    placeholder="请输入内容"
                    v-model="input"
                    clearable style="width: 20%">
            </el-input>
            <el-button icon="el-icon-search" circle type="primary"></el-button>
        </div>

        <div style="display: flex;justify-content: left">
            <div class="a1">
                <el-menu
                        default-active="1"
                        class="el-menu-vertical-demo"
                        background-color="#545c64"
                        text-color="#fff"
                        active-text-color="#ffd04b">
                    <el-menu-item>
                        <span>网站分类</span>
                    </el-menu-item>
                    <el-menu-item @click="findByTag(itm.id)" v-for="itm in tags">
                        <span>{{itm.name}}</span>
                    </el-menu-item>
                </el-menu>
            </div>

            <div class="a2">
                <template>
                    <el-table
                            :data="blogs"
                            style="width: 100%">
                        <el-table-column>
                            <template slot-scope="scope">
                                <div style="display: flex;justify-content: space-between;
                                     background-color: lightblue">
                                    <span>标题:{{scope.row.title}}</span>
                                    <span>作者:{{scope.row.author}}</span>
                                    <span>发表时间:{{scope.row.time}}</span>
                                </div>

                                <div style="margin-top: 10px">
                                    <span>{{scope.row.digest}}</span>
                                </div>

                                <div style="display: flex;justify-content:space-between;margin-top: 10px ">
                                    <span>浏览次数:</span>
                                    <el-button type="text" @click="details(scope.row.id)">阅读全文</el-button>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                </template>

                <el-pagination
                        background
                        :page-size="num"
                        @current-change="pageChange"
                        :current-page="start"
                        layout="prev, pager, next"
                        :total="total">
                </el-pagination>
            </div>
        </div>
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data:{
            input:"",
            start:1,
            total:0,
            num:5,
            blogs:[],
            tags:[],
        },
        methods:{
            pageChange(it){
                console.log(it)
                var that = this;
                axios.get("/api/public/blogs/findByPage/"+ it +"/"+this.num).then(function (resp) {
                    console.log(resp.data)
                    that.blogs = resp.data.blogs;
                    that.total = resp.data.total;
                })
            },
            //点击类型
            findByTag(id){
                var _this = this;
                console.log(id)
                this.tagid = id;
                axios.get("/api/public/blogs/findByPageByTagId/"+ this.start+"/"+this.num+"/"+this.tagid)
                    .then(function (resp) {
                        console.log(resp)
                        _this.blogs = resp.data.data.blogs;
                        _this.total = resp.data.data.total;
                        console.log(_this.total)
                        console.log("在这里===="+_this.blogs)
                    })
            },
            //请求去详情页
            details(blogid){
                console.log(blogid)
                window.location.href="/api/public/blogs/details/"+blogid
            }
        },
        mounted: function(){
            //博文分页
            var _this = this;
            axios.get("/api/public/blogs/findByPage/"+this.start+"/"+this.num)
                .then(function (resp) {
                console.log(resp.data)
                _this.blogs = resp.data.blogs;
                _this.total = resp.data.total;
            })

            //查看全部类型
            console.log(this.tagid)
            axios.get("/api/public/tag/findAll")
                .then(function (resp) {
                  _this.tags = resp.data
                  console.log(_this.tags)
            })
        }
    })
</script>

<style>
    .a1{
        border: 1px solid black;
        width: 220px;
        height:1000px;
        margin-top: 6px;
        margin-right: 4px;
    }

    .a2{
        border: 1px solid #000000;
        width: 100vw;
        height: 1000px;
        margin-top: 6px;
    }
</style>
</html>